<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表过滤</title>
</head>
<body>
  <div id="root">
      <input type="text" placeholder="请输入姓名" v-model="input">

      <ul>
          <li v-for="person in personRes" :key="person.id">
             {{person.name}} --- {{person.age}}  --- {{person.sex}}
          </li>
      </ul>

  </div>


<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script>
Vue.config.productionTip = false

    new Vue({
        el:'#root',
        data:{
            persons:[
                {id:'001',name:'马冬梅',age:19,sex:'女'},
                {id:'002',name:'周冬雨',age:20,sex:'女'},
                {id:'003',name:'周杰伦',age:21,sex:'男'},
                {id:'004',name:'温兆伦',age:22,sex:'男'}
            ],
            personRes: '',
            input: ''
        },

        watch:{
            input:{
                immediate: true,
                handler(val){
                  this.personRes = this.persons.filter(per =>{
                      return per.name.indexOf(val) !== -1;
                  })
                }

            }
        }
    })


</script>
</body>
</html>